<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的环保需求</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/youyi.css"/>
		<link rel="stylesheet" type="text/css" href="../css/environmental.css"/>
		<style>
			body{background-color: #fff;}
			.mui-scroll-wrapper{top: 44px;bottom: 51px;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav top_nav">
			<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left detail_left"></a>-->
			<h1 class="mui-title">我的环保需求</h1>
			<a href="#picture" class="mui-icon mui-icon-bars mui-pull-right action_menu"></a>
		</header>
		<div class="mui-content">
			<div class="mui-scroll-wrapper">
			    <div class="mui-scroll">
			        <div class="my_requirements_list">
						<table border="0" cellspacing="0" cellpadding="">
							<!--<thead>
								<tr>
									<th>Header</th>
									<th>Header</th>
									<th>Header</th>
									<th>Header</th>
									<th>Header</th>
								</tr>
							</thead>-->
							<tr>
								<td width="15%" class="mui-ellipsis">危害服务</td>
								<td  width="10%" class="mui-ellipsis">李**</td>
								<td  width="30%" class="mui-ellipsis">135**** ****</td>
								<td  width="10%" class="mui-ellipsis mui-badge-inverted mui-badge-warning">提交中</td>
								<td  width="20%" class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td width="15%" class="mui-ellipsis">危害服务</td>
								<td  width="10%" class="mui-ellipsis">李**</td>
								<td  width="30%" class="mui-ellipsis">135**** ****</td>
								<td  width="10%" class="mui-ellipsis mui-badge-inverted mui-badge-warning">提交中</td>
								<td  width="20%" class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td width="15%" class="mui-ellipsis">危害服务</td>
								<td  width="10%" class="mui-ellipsis">李**</td>
								<td  width="30%" class="mui-ellipsis">135**** ****</td>
								<td  width="10%" class="mui-ellipsis mui-badge-inverted mui-badge-warning">提交中</td>
								<td  width="20%" class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td width="15%" class="mui-ellipsis">危害服务</td>
								<td  width="10%" class="mui-ellipsis">李**</td>
								<td  width="30%" class="mui-ellipsis">135**** ****</td>
								<td  width="10%" class="mui-ellipsis mui-badge-inverted mui-badge-warning">提交中</td>
								<td  width="20%" class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td width="15%" class="mui-ellipsis">危害服务</td>
								<td  width="10%" class="mui-ellipsis">李**</td>
								<td  width="30%" class="mui-ellipsis">135**** ****</td>
								<td  width="10%" class="mui-ellipsis mui-badge-inverted mui-badge-warning">提交中</td>
								<td  width="20%" class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td width="15%" class="mui-ellipsis">危害服务</td>
								<td  width="10%" class="mui-ellipsis">李**</td>
								<td  width="30%" class="mui-ellipsis">135**** ****</td>
								<td  width="10%" class="mui-ellipsis mui-badge-inverted mui-badge-warning">提交中</td>
								<td  width="20%" class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td width="15%" class="mui-ellipsis">危害服务</td>
								<td  width="10%" class="mui-ellipsis">李**</td>
								<td  width="30%" class="mui-ellipsis">135**** ****</td>
								<td  width="10%" class="mui-ellipsis mui-badge-inverted mui-badge-warning">提交中</td>
								<td  width="20%" class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td width="15%" class="mui-ellipsis">危害服务</td>
								<td  width="10%" class="mui-ellipsis">李**</td>
								<td  width="30%" class="mui-ellipsis">135**** ****</td>
								<td  width="10%" class="mui-ellipsis mui-badge-inverted mui-badge-warning">提交中</td>
								<td  width="20%" class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td width="15%" class="mui-ellipsis">危害服务</td>
								<td  width="10%" class="mui-ellipsis">李**</td>
								<td  width="30%" class="mui-ellipsis">135**** ****</td>
								<td  width="10%" class="mui-ellipsis mui-badge-inverted mui-badge-warning">提交中</td>
								<td  width="20%" class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td width="15%" class="mui-ellipsis">危害服务</td>
								<td  width="10%" class="mui-ellipsis">李**</td>
								<td  width="30%" class="mui-ellipsis">135**** ****</td>
								<td  width="10%" class="mui-ellipsis mui-badge-inverted mui-badge-warning">提交中</td>
								<td  width="20%" class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td width="15%" class="mui-ellipsis">危害服务</td>
								<td  width="10%" class="mui-ellipsis">李**</td>
								<td  width="30%" class="mui-ellipsis">135**** ****</td>
								<td  width="10%" class="mui-ellipsis mui-badge-inverted mui-badge-warning">提交中</td>
								<td  width="20%" class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td width="15%" class="mui-ellipsis">危害服务</td>
								<td  width="10%" class="mui-ellipsis">李**</td>
								<td  width="30%" class="mui-ellipsis">135**** ****</td>
								<td  width="10%" class="mui-ellipsis mui-badge-inverted mui-badge-warning">提交中</td>
								<td  width="20%" class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td class="mui-ellipsis">危害服务</td>
								<td class="mui-ellipsis">李**</td>
								<td class="mui-ellipsis">1354423 5655</td>
								<td class="mui-ellipsis mui-badge-success mui-badge-inverted">洽谈中</td>
								<td class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td class="mui-ellipsis">危害服务</td>
								<td class="mui-ellipsis">李**</td>
								<td class="mui-ellipsis">1354423 5655</td>
								<td class="mui-ellipsis mui-badge-success mui-badge-inverted">洽谈中</td>
								<td class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td width="15%" class="mui-ellipsis">危害服务</td>
								<td  width="10%" class="mui-ellipsis">李**</td>
								<td  width="30%" class="mui-ellipsis">135**** ****</td>
								<td  width="10%" class="mui-ellipsis mui-badge-inverted mui-badge-warning">提交中</td>
								<td  width="20%" class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
							<tr>
								<td width="15%" class="mui-ellipsis">危害服务</td>
								<td  width="10%" class="mui-ellipsis">李**</td>
								<td  width="30%" class="mui-ellipsis">135**** ****</td>
								<td  width="10%" class="mui-ellipsis mui-badge-inverted mui-badge-warning">提交中</td>
								<td  width="20%" class="mui-ellipsis">2016/06/02</td>
								<td><a href="javascript:;"><img src="../images/my/look_detail.png"/></a></td>
							</tr>
						</table>
					</div>
			    </div>
			</div>
			
		</div>
		<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom my_need_pop">
			<div class="my_need_pop_list">
				<h6 class="pop_head">筛选选项</h6>
				<ul>
					<li>
						<span>按需求类型 </span>
						<h3><span>全部显示</span>
							<ul>
								<li>全部显示</li>
								<li>部分显示</li>
								<li>显示一条</li>
							</ul>
						</h3>
					</li>
					<li>
						<span>按发布日期 </span>
						<h3><span>全部显示</span>
							<ul>
								<li>显示最近一周</li>
								<li>显示最近三天</li>
								<li>显示今天的</li>
							</ul>
						</h3>
					</li>
				</ul>
				<div class="sure_require">
					<a href="#picture" class="mui-btn mui-btn-block mui-btn-success">确定</a>
				</div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab bottom_nav">
			<a id="defaultTab" class="mui-tab-item" href="index.html">
				<span class="mui-icon iconfont icon-shouye"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="../onlineConsulting/online_consulting.html">
				<span class="mui-icon iconfont icon-iconfont"></span>
				<span class="mui-tab-label">环保商城</span>
			</a>
			<a class="mui-tab-item" href="environmentalMap/environmental_map.html">
				<span class="mui-icon iconfont icon-ditu"></span>
				<span class="mui-tab-label">环保地图</span>
			</a>
			<a class="mui-tab-item" href="enterpriseLibrary/enterprise_library.html">
				<span class="mui-icon iconfont icon-guanjiaowangtubiao02"></span>
				<span class="mui-tab-label">企业库</span>
			</a>
			<a class="mui-tab-item mui-active" href="my/my.html">
				<span class="mui-icon iconfont icon-wode"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			mui.init({
				preloadPages:[{
					id:'my_requirements_detail.html',
					url:'my_requirements_detail.html',
				}]
			});
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: true,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});

			//添加列表项的点击事件
			$('.mui-slider-group').on('tap','a',function(e) {
				mui.openWindow("../product_details.html");
			});
			})(mui);
			//下拉
			mui(".my_need_pop_list").on("tap","h3",function(){
				var theUl=$("ul",this);
					theUl.slideDown();
					$(".my_need_pop_list h3 ul").not(theUl).hide();
			});
			//上拉
			mui(".my_need_pop_list li h3 ul").on("tap","li",function(){
				var theText=$(this).text();
					$(this).closest("ul").slideUp().prev().text(theText);
					return false;
			});
			//弹窗选择
			mui(".sure_require").on("tap","a",function(ev){
				var selectedData=[];
				$(this).closest(".my_need_pop_list").find(">ul>li").each(function(index, ele){
					var val=$("h3>span",this).text();
						selectedData.push(val);
				});
				console.log(selectedData);
			});
			//打开详情页
			mui(".my_requirements_list").on("tap","a",function(){
				mui.openWindow("my_requirements_detail.html");
			});
		</script>
	</body>
</html>